<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <button class="get">获取</button>
    <button class="set">设置</button>

    <form class="form">
        <p>
            <label for="user">用户名:</label>
            <input type="text" name="user" value="" placeholder="请输入...">
        </p>
        <p>
            <label for="pwd">密&emsp;码:</label>
            <input type="text" name="pwd">
        </p>
        <p>
            <input type="number" value="0" min="0" max="100" step="5">
            <input type="range" value="0" min="0" max="100" step="5">
        </p>
        <p>
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </p>
        <p>
            <select name="year" multiple>
                <option value="1">2001</option>
                <option value="2">2002</option>
                <option value="3">2003</option>
                <option value="4">2004</option>
                <option value="5">2005</option>
                <option value="6">2006</option>
                <option value="7">2007</option>
                <option value="8">2008</option>
                <option value="9">2009</option>
                <option value="10">2010</option>
                <option value="11">2011</option>
                <option value="12">2012</option>
                <option value="13">2013</option>
                <option value="14">2014</option>
                <option value="15">2015</option>
                <option value="16">2016</option>
                <option value="17">2017</option>
                <option value="18">2018</option>
                <option value="19">2019</option>
                <option value="20" selected>2020</option>
            </select>
        </p>
        <p>
            <!-- <input class="submit" type="submit" value="提交">
            <input class="reset" type="reset" value="重置"> -->
        </p>
    </form>


</body>
<script>

    // 元素节点的属性 表单相关

    // value  获取和设置表单元素的value值

    // input 相关
    // type  获取和设置表单元素的type类型
    // name  获取和设置表单元素的name属性
    // placeholder  获取和设置表单元素的提示内容

    // min
    // max
    // step


    // select
    // value 获取和设置下拉框的value值(被选中的option中的值)
    // a. 如果option中存在value属性,优先取value中的值
    // a. 如果option中不存在value属性,则取option标签内的值

    // selectedIndex     获取和设置被选中的option的下标
    // selectedOptions   获取被选中的option的集合 (常用于多选)



    var submitBtn = document.getElementsByClassName("submit")[0];
    var getBtn = document.getElementsByClassName("get")[0];
    var setBtn = document.getElementsByClassName("set")[0];
    var userInp = document.getElementsByName("user")[0];
    var pwdInp = document.getElementsByName("pwd")[0];
    var yearSel = document.getElementsByName("year")[0];

    var number = document.querySelector("[type='number']");
    var range = document.querySelector("[type='range']");




    getBtn.onclick = function () {
        // console.log(userInp.value);
        // console.log(userInp.type);
        // console.log(userInp.name);
        // console.log(userInp.placeholder);

        console.log(yearSel.value);
        console.log(yearSel.selectedIndex);
        console.log(yearSel.selectedOptions);
    }

    setBtn.onclick = function () {
        // pwdInp.type = pwdInp.type === "text" ? "password" : "text";
        // pwdInp.name = "PWD";
        // pwdInp.placeholder = "请输入密码";

        // yearSel.value = "20";
        // yearSel.selectedIndex = 0;
    }

    number.oninput = range.oninput = function () {
        console.log(this.value);  // this-> 这个(哪个触发事件 就代表哪一个)
        console.log(this.min);
        console.log(this.max);
        console.log(this.step);
    }








</script>


</html>